<!DOCTYPE html>
<!-- html:5 缩写-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background-color: rgb(222, 222, 222);
    }
    
    #app {
        margin: 0 auto;
        padding: 15px 20px;
        width: 400px;
        background-color: white;
        box-shadow: 1px 1px 3px 3px rgba(177, 177, 177, 0.6);
    }
    
    .title {
        position: relative;
        text-align: center;
        height: 5%;
    }
    
    .title>span {
        display: inline-block;
        vertical-align: middle;
    }
    
    .inputArea {
        position: relative;
        height: 40px;
    }
    
    .inputArea>input {
        width: 100%;
        height: 100%;
        position: relative;
        box-sizing: border-box;
        /* 解决W3C标准盒子（不计入边框和内边距）获取父元素宽度计算导致溢出问题 */
        outline: none;
        border: 1px solid rgb(203, 98, 89);
        border-radius: 5px;
        padding-left: 15px;
    }
    
    .addIcon {
        position: absolute;
        box-sizing: border-box;
        top: 0px;
        right: 0px;
        width: 25%;
        height: 100%;
        color: white;
        background-color: rgb(203, 98, 89);
        border: 1px solid rgb(203, 98, 89);
        border-radius: 0px 5px 5px 0px;
        cursor: pointer;
    }
    
    .questEle {
        color: rgb(111, 111, 111);
        width: 100%;
        padding: 10px 15px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(177, 177, 177, 0.6);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .removeBtn {
        cursor: pointer;
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
    }
    
    .removeBtn::before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        height: 1px;
        width: 100%;
        rotate: 45deg;
        background-color: brown;
    }
    
    .removeBtn::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        height: 1px;
        width: 100%;
        rotate: -45deg;
        background-color: brown;
    }
    
    .countData {
        display: flex;
        padding: 0 20px;
        justify-content: space-between;
        font-size: small;
        color: rgb(111, 111, 111);
        margin-top: 10px;
    }
    
    .clean {
        cursor: pointer;
    }
    
    span {
        cursor: default;
        user-select: none;
    }
</style>

<body>
    <!-- div#app 缩写  综合案例 Todolist-->
    <div id="app">
        <div class="title"><span>To Do List</span></div>
        <div>
            <div class="inputArea">
                <input @keyup.enter="addQuest()" placeholder="请输入任务" type="text" v-model="quest">
                <button class="addIcon" @click="addQuest()">添加任务</button>
            </div>
            <div class="questEle" v-for="(items, index) in list" :key="items.id">
                <div>
                    <span>{{index+1}}.</span>
                    <span> {{items.name}}</span>
                </div>
                <div class="removeBtn" @click="removeQuest(items.id)"></div>
            </div>
            <div class="countData" v-show="list.length!=0">
                <span>合计：{{list.length}}</span>
                <span class="clean" @click="clean()">清空任务</span>
            </div>
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: [{
                    id: 0,
                    name: "学习JavaScript"
                }],
                quest: "",
            },
            methods: {
                addQuest() {
                    if (!this.quest.trim()) {
                        return
                    }
                    // var newRecord = new Object({
                    //     id: +new Date(),
                    //     name: this.quest
                    // })
                    // this.list.push(newRecord)
                    this.list.unshift({
                        id: +new Date(),
                        name: this.quest
                    })
                    this.quest = ""
                },
                removeQuest(target) {
                    this.list = this.list.filter((items) => items.id !== target)
                },
                clean() {
                    this.list = [];
                }
            },
        })
    </script>
</body>

</html>